<%--
  Created by IntelliJ IDEA.
  User: YKMZ
  Date: 2022/9/19
  Time: 16:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>学生列表</title>
    <%-- 1. 引入jquery--%>
    <script src="webjars/jquery/3.6.1/dist/jquery.min.js"></script>
    <%-- 2. 引入bootstrap的css样式--%>
    <link rel="stylesheet" href="webjars/bootstrap/3.4.1/dist/css/bootstrap.min.css">
    <%-- 3. 引入bootstrap的js样式--%>
    <script src="webjars/bootstrap/3.4.1/dist/js/bootstrap.min.js"></script>
    <style>
        .table{
            text-align: center;
        }
        .container{
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <h3>学生列表(Servlet + Mybatis + Git + Maven + WebJars + Bootstrap)</h3>
                </h3>
            </div>
            <table class="table table-bordered table-hover">
                <tr>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>住址</td>
                    <td>所在班级</td>
                    <td>操作</td>
                </tr>
                <c:forEach items="${pr.rows}" var="stud">
                    <tr>
                        <td>${stud.sid}</td>
                        <td>${stud.sname}</td>
                        <td>${stud.sex}</td>
                        <td>${stud.age}</td>
                        <td>${stud.addr}</td>
                        <td>${stud.cname}</td>
                        <td>
                            <a href="#" class="btn btn-success btn-sm" onclick="updateUI(${stud.sid},'${stud.sname}','${stud.sex}',${stud.age},'${stud.addr}',${stud.cid})">修改</a>
                            <a href="/student?cmd=delete&sid=${stud.sid}" class="btn btn-danger btn-sm" onclick="return confirm('你真的要删除吗？')">删除</a>
                        </td>
                    </tr>
                </c:forEach>
            </table>
            <div class="panel-footer text-right">
                <%--1. 进行条件查询 --%>
                    <form class="form-inline" style="float: left;margin-top:10px" name="form1" action="/student?cmd=search" method="post">
                        <input type="hidden" name="page" id="page">
                        <div class="form-group">
                            <input type="text" class="form-control" name="sname" value="${param.sname}"  placeholder="输入学生姓名">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="addr" value="${param.addr}" placeholder="输入住址">
                        </div>
                        <select class="form-control" name="cid">
                            <option value="0">所在班级</option>
                            <c:forEach items="${classes}" var="c">
                            <option value="${c.cid}" ${param.cid == c.cid ? 'selected':''}>${c.cname}</option>
                            </c:forEach>
                        </select>

                        <button type="submit" class="btn btn-default">查询</button>
                        <button type="button" class="btn btn-primary" onclick="addUI()">添加</button>
                    </form>
                <%--2. 分页导航 --%>
                <nav style="margin-top: -10px;" >
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <c:forEach begin="1" end="${pr.totalPage}" var="p">
                            <%--param.page相当于:request.getParameter("page")--%>
                            <li class="${p==param.page ? 'active': ''}">
                                <a href="#" onclick="skipPage(${p})">${p}</a>
                            </li>
                        </c:forEach>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <!--Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="title">添加学生</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" method="post" action="/student?cmd=add" name="form2">
                        <input type="hidden" name="sid" id="sid" >
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">姓名：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="sname" id="sname" placeholder="学生姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">性别：</label>
                            <div class="col-sm-10">
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="sex" id="sex1"  value="男" >男
                                    </label>
                                    <label>
                                        <input type="radio" name="sex" id="sex2"  value="女" >女
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">年龄：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="age" id="age" placeholder="学生年龄">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">住址：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="addr" id="addr" placeholder="学生住址">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">班级：</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="cid" id="cid">
                                    <option value="0">所有班级</option>
                                    <c:forEach items="${classes}" var="c">
                                        <option value="${c.cid}" ${param.cid == c.cid ? 'selected' : ''}>${c.cname}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭(C)</button>
                    <button type="button" class="btn btn-primary" onclick="save()">保存(S)</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    //1. 点击了分页按钮执行的函数
    function skipPage(p) {
        //1.1 为表单隐藏域赋值
        $("#page").val(p);
        document.form1.submit();
    }
    //2. 添加学生
    function addUI() {
        //2.1 修改标题
        $("#title").text("添加学生")
        //2.2 清空数据
        document.form2.reset();
        $("#myModal").modal('show')
    }
    //3. 保存
    //3.1 区分是添加还是修改，有id是修改，没有id是添加
    function save() {
        //3.2得到表单隐藏域的值
        let sid = $("#sid").val()
        //3.2.1 判断是否有值
        if (sid){
            //3.2.2 修改url地址
            document.form2.action = "/student?cmd=update"
            //3.2.3 修改学生标题
            $("#title").text("修改学生")
        }
        //3.3.3 提交表单
        document.form2.submit();
    }
    //4. 修改学生
    function updateUI(sid,sname,sex,age,addr,cid) {
        //4.1 为表单赋值
        $("#sid").val(sid)
        $("#sname").val(sname)
        $("#age").val(age)
        $("#addr").val(addr)
        $("#cid").val(cid)
        $("#sex1").prop('checked', sex == '男' ? true : '')
        $("#sex2").prop('checked', sex == '女' ? true : '')
        // //4.2 打开模态框
        $("#myModal").modal('show')
        //3.1 修改标题
        $("#title").text("修改学生")


    }
</script>